﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
  <head>
    <title>Title</title>
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all" />
    <link rel="stylesheet" href="${ctx}/common/common.css" />
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>
    <script src="${ctx}/common/plugins/publicJs/publicJs.js"></script>
    <style>
      .layui-form-checkbox[lay-skin="primary"] i {
        top: 6px;
      }
    </style>
  </head>
  <body>
    <!--主体内容层-->
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12 layui-col-space15">
          <!--输入框内容盒子-->
          <div class="layui-col-md12">
            <!--输入框-->
            <div class="layui-col-md4">
              <label class="layui-form-label">产品名称</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  name="productName"
                  id="productName"
                  required
                  lay-verify="required"
                  placeholder="请输入产品名称"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
          </div>

          <!--通用按钮盒子-->
          <div class="layui-col-md12" style="padding-top: 10px; padding-bottom: 10px">
            <!--通用table表格-->
            <div class="layui-btn-group demoTable">
              <button class="layui-btn layui-btn-sm" type="button" data-type="addProduct">
                <i class="layui-icon">&#xe654;</i>
              </button>
              <!--删除-->
              <button class="layui-btn layui-btn-sm" type="button" data-type="delProductSelect">
                <i class="layui-icon">&#xe640;</i>
              </button>
            </div>
            <div style="float: right" class="layui-btn-group paramBtn">
              <button data-type="reloadProduct" type="button" class="layui-btn layui-btn-sm layui-btn-danger">
                查询
              </button>
              <button data-type="resetProduct" type="reset" class="layui-btn layui-btn-sm layui-btn-danger">
                重置
              </button>
            </div>
          </div>

          <table
            class="layui-table"
            id="productReload"
            lay-data="{ url:'${ctx}/products/findProductPage', page:true,groups:5}"
            lay-filter="demo"
          >
            <thead>
              <tr>
                <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                <th lay-data="{field:'name',sort:true,templet:'#titleTpl1'}">产品名称</th>
                <th lay-data="{field:'pro_cla_name',sort:true,templet:'#titleTpl2'}">产品类型</th>
                <!--  <th lay-data="{field:'specifications',sort:true,width:100}">规格</th>
                    <th lay-data="{field:'unit',sort:true,width:80}">单位</th> -->
                <th lay-data="{field:'traceability_name',sort:true,templet:'#titleTpl3'}">溯源类型</th>
                <th lay-data="{field:'right',toolbar:'#barDemo'}">操作</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
    <script type="text/html" id="titleTpl1">
      <div title="{{d.name}}"><span>{{d.name}}</span></div>
    </script>
    <script type="text/html" id="titleTpl2">
      <div title="{{d.pro_cla_name}}"><span>{{d.pro_cla_name}}</span></div>
    </script>
    <script type="text/html" id="titleTpl3">
      <div title="{{d.traceability_name}}"><span>{{d.traceability_name}}</span></div>
    </script>
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      <a class="layui-btn layui-btn-xs" lay-event="sermigood">半成品</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="material">物料</a>
    </script>
    <script id="createTime" type="text/html">
      {{# return layui.getDate(d.create_time, 'yyyy-MM-dd hh:mm:ss');}}
    </script>
  </body>
  <script>
    layui.use("table", function () {
      var loading = layer.msg("数据加载中...");
      var table = layui.table;
      table.render({
        done: function () {
          layer.close(loading);
        },
      });
      //监听filter为demo的table中的工具条
      table.on("tool(demo)", function (obj) {
        var data = obj.data;
        if (obj.event === "detail") {
          window.location.href = "${ctx}/products/view/" + obj.data.id;
        } else if (obj.event === "del") {
          layer.confirm("确认删除？", function (index) {
            obj.del();
            layer.close(index);
            $.post(
              "${ctx}/products/delete",
              { productIds: obj.data.id },
              function (data) {
                if (data == "1") {
                  layer.alert("删除成功");
                  table.reload("productReload", {
                    where: {
                      productName: "",
                    },
                  });
                } else {
                  layer.alert("删除失败");
                }
              },
              "text"
            );
          });
        } else if (obj.event === "edit") {
          window.location.href = "${ctx}/products/update/" + obj.data.id;
        } else if (obj.event === "sermigood") {
          window.location.href = "${ctx}/products/toSermigood/" + obj.data.id;
        } else if (obj.event === "material") {
          window.location.href = "${ctx}/products/toMaterial/" + obj.data.id;
        }
      });

      var $ = layui.$,
        active = {
          reloadProduct: function () {
            //条件查询
            var productName = document.getElementById("productName").value;
            table.reload("productReload", {
              where: {
                productName: productName,
              },
            });
          },
          resetProduct: function () {
            document.getElementById("productName").value = "";
            table.reload("productReload", {
              where: {
                productName: "",
              },
            });
          },
          addProduct: function () {
            window.location.href = "${ctx}/products/create";
          },
          delProductSelect: function () {
            var checkStatus = table.checkStatus("productReload");
            var ids = "";
            var data = checkStatus.data;
            for (var i in data) {
              ids += data[i].id + ",";
            }
            if (ids == "") {
              layer.alert("请选择要删除的产品信息");
              return false;
            }
            layer.confirm("确认删除？", function (index) {
              layer.close(index);
              $.post(
                "${ctx}/products/delete",
                { productIds: ids },
                function (data) {
                  if (data == "1") {
                    layer.alert("删除成功");
                    table.reload("productReload", {
                      where: {
                        productName: "",
                      },
                    });
                  } else {
                    layer.alert("删除失败");
                  }
                },
                "text"
              );
            });
          },
        };

      $(".demoTable .layui-btn").on("click", function () {
        var type = $(this).data("type");
        active[type] ? active[type].call(this) : "";
      });
      //给按钮绑定active中的方法
      $(".paramBtn .layui-btn").on("click", function () {
        var type = $(this).data("type");
        //查看是active这个json中是否有type这个方法，如果有调用，如果没有不知心；
        active[type] ? active[type].call() : "";
      });
    });
  </script>
</html>
